<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <p></p>

    <input type="text" value="" class="t1">
    <input type="button" value="=">
    <input type="text" value="" class="t2">

    <div class="box">
        <input type="text" class="t3">
        <input type="text" class="t4">
        <input type="button" value="生成">
        <textarea name="" id="" cols="30" rows="10" value=""></textarea>
    </div>

    <div class="box1">
        <input type="text" class="t5">
        <input type="button" value="生成">
        <input type="text" class="t6" placeholder="和">
        <input type="text" class="t7" placeholder="积">
    </div>
    
    <script>
        // 1. 测试事件效果
        // - 注意事件加给谁了，触发行为是什么，触发时的元素是否是添加事件的元素
        // - 思考键盘事件应该加给谁
        var p = document.querySelector('p');

        function blue(){
            p.style.backgroundColor = 'blue';
        }

        function blue1(){
            return function(){
                p.style.backgroundColor = 'blue';
            }
        }

        // p.onclick = function(){
        //     p.style.backgroundColor = 'blue';
        // }

        // p.onclick = blue;

        // p.onclick = function(){
        //     blue();
        // }

        p.onclick = blue1();


        // 2. 将之前所有作业，全部封装成一个一个的函数
        // - 按需使用参数或返回值
        // 3. 编写一个函数，计算两个数字的和／差／积／商
        // - 使用传参的方式
        function fn1(a,b){
            console.log(a+b);
            console.log(a-b);
            console.log(a*b);
            console.log(a/b);
        }
        fn1(1,2);

        // 4. 编写一个函数，计算三个不同数字的大小，按从小到大顺序打印
        // - 穷举法
        function fn2(a,b,c){
            if(a > b && b > c){
                console.log(c,b,a);
            }else if(a > c && c > b){
                console.log(b,c,a);
            }else if(b > a && a > c){
                console.log(c,a,b);
            }else if(b > c && c > a){
                console.log(a,c,b);
            }else if(c > a && a > b){
                console.log(b,a,c);
            }else if(c > b && b > a){
                console.log(a,b,c);
            }
        }
        fn2(4,2,5);


        // 5. 编写一个函数，实现任意个任意数字的求 和 或 积 的函数

        let [t5,button,t6,t7] = document.querySelectorAll('.box1 input');

        button.onclick = function(){
            if(t5.value !== ''){
                function fn3(num){
                    var sum = num.split('');
                    console.log(sum)
                    var he = 0;
                    var ji = 1;
                    sum.forEach(item=>{
                        he += Number(item);
                        ji *= Number(item);
                        // t6.value = he;
                        // t7.value = ji;
                    })
                    return [he,ji];
                }
                t6.value = fn3(t5.value)[0];
                t7.value = fn3(t5.value)[1];
            }
        }
        

        
        // 6. 编写一个函数，计算任意两个个位数之间所能组成的两位数的奇数
        // - 计算0，3之间能组成的奇数个是：01、21、03、13、23、31
        // - 不要使用返回值

        //0-1  01
        //0-2  01
        //0-3  01、21、03、13、23、31

        let [t3,t4,butt] = document.querySelectorAll('.box input');
        let ta = document.querySelector('.box textarea');
        
        let flag = true;
        butt.onclick = function(){
            function x(a,b){
                for(var i=a;i<=b;i++){
                    for(var j=a;j<=b;j++){
                        if(Number(i.toString() + j) % 2 && i !== j){
                            ta.value += i.toString() + j + '   ';
                        }
                    }
                }
            }

            function fn4(a,b){
                if(a > b){
                    var t = a;
                    a = b;
                    b = t;
                }
                x(a,b);
            }

            if(flag){
                fn4(t3.value,t4.value);
                flag = false;
            }else{
                ta.value = '';
                fn4(t3.value,t4.value);
            }
        }
        



        // 7. 某个公司采用公用电话传递数据，数据是四位的整数，在传递过程中是加密的，加密规则如下：每位数字都加上5,然后用除以10的余数代替该数字，再将第一位和第四位交换，第二位和第三位交换，请编写一个函数，传入原文，输出密文
        // - 进去：3715
        // - 出来：0628
        // - 两个变量交换，再创建第三个变量做过渡


        
        let btn = document.querySelector('input[type=button]');
        let t2 = document.querySelector('.t2');

        btn.onclick = function(num){
            let t1 = document.querySelector('.t1').value;

            function fn5(num){
                var qian = parseInt(num / 1000);
                var bai = parseInt(num / 100) % 10;
                var shi = parseInt(num / 10) % 10;
                var ge = num % 10;

                var q = (ge + 5) % 10;
                var b = (shi + 5) % 10;
                var s = (bai + 5) % 10;
                var g = (qian + 5) % 10;
                return (q.toString() + b + s + g);
            }
            var res = fn5(t1);
            t2.value = res;
        }
        

    </script>
</body>
</html>